<template>
  <view
    class="page_root"
    data-page-name="交付看板-进行中项目详情"
    data-page-identification="f_lun29f6gff"
  >
    <!-- UNI_APP_EXEGESIS_START NAVIGATION_TEMPLATE UNI_APP_EXEGESIS_END -->
    <!-- begin vid_t6yoxv8mae 自定义模板_zuijfj20tt -->
    <view class="body">
      <view class="top-bac"></view>
      <view class="main">
        <view
          v-if="state.projectType === '进行中'"
          class="process-item-doing"
          v-for="(item, index) in state.progressData"
        >
          <view class="process-item-first">
            <scroll-view scroll-x="true" class="item-name">{{ item['项目名称'] }}</scroll-view>
            <view class="item-pl"><u-icon name="account"></u-icon>{{ item['项目经理'] }}</view>
          </view>
          <view class="milepost-name" scroll-x="true">
            <scroll-view class="milepost-first" scroll-x="true">当前项目阶段：</scroll-view>
              <scroll-view class="milepost-second" scroll-x="true">{{ item['当前项目阶段\t'] }}</scroll-view>
            </view>
          <view class="process-item-second">
            <view class="second-title">计划合同完成时间</view>
            <view class="second-time">{{ item['计划（合同完成时间）\t'] }}</view>
          </view>
          <view class="process-item-three">
            <view class="three-title">合同总金额</view>
            <view class="three-line">
              <u-line-progress
                inactive-color="#fff"
                :show-percent="false"
                style="height: 10px; border-radius: 10px"
                active-color="#3875FF"
                :percent="item['合同总金额'] / 5"
              />
            </view>
            <view class="three-count">{{ item['合同总金额'] }}万元</view>
          </view>
          <view class="process-item-four">
            <view class="four-title">项目支出</view>
            <view class="four-line">
              <u-line-progress
                inactive-color="#fff"
                :show-percent="false"
                style="height: 10px; border-radius: 10px"
                active-color="#FF9846"
                :percent="item['项目支出'] / 5"
              />
            </view>
            <view class="four-count">{{ item['项目支出'] }}万元</view>
          </view>
          <view class="process-item-five">
            <view class="five-title">项目回款</view>
            <view class="five-line">
              <u-line-progress
                inactive-color="#fff"
                :show-percent="false"
                style="height: 10px; border-radius: 10px"
                active-color="#36CBCB"
                :percent="item['项目回款'] / 5"
              />
            </view>
            <view class="five-count">{{ item['项目回款'] }}万元</view>
          </view>
        </view>
        <view
          v-else-if="state.projectType === '已交付'"
          class="process-item"
          v-for="(item, index) in state.deliveredData"
        >
          <view class="process-item-first">
            <scroll-view scroll-x="true" class="item-name">{{ item['项目名称'] }}</scroll-view>
            <view class="item-pl"><u-icon name="account"></u-icon>{{ item['项目经理'] }}</view>
          </view>
          <view class="delayed-item-second">
            <view class="second-title">计划合同完成时间</view>
            <view class="second-time">{{ item['计划（合同完成时间）'] }}</view>
          </view>
          <view class="delayed-item-time">
            <view class="second-title">实际完成时间</view>
            <view class="second-time">{{ item['实际完成时间'] }}</view>
          </view>
          <view class="process-item-three">
            <view class="three-title">合同总金额</view>
            <view class="three-line">
              <u-line-progress
                inactive-color="#fff"
                :show-percent="false"
                style="height: 10px; border-radius: 10px"
                active-color="#3875FF"
                :percent="item['合同总金额'] / 5"
              />
            </view>
            <view class="three-count">{{ item['合同总金额'] }}万元</view>
          </view>
          <view class="process-item-four">
            <view class="four-title">项目支出</view>
            <view class="four-line">
              <u-line-progress
                inactive-color="#fff"
                :show-percent="false"
                style="height: 10px; border-radius: 10px"
                active-color="#FF9846"
                :percent="item['项目支出'] / 5"
              />
            </view>
            <view class="four-count">{{ item['项目支出'] }}万元</view>
          </view>
          <view class="process-item-five">
            <view class="five-title">项目回款</view>
            <view class="five-line">
              <u-line-progress
                inactive-color="#fff"
                :show-percent="false"
                style="height: 10px; border-radius: 10px"
                active-color="#36CBCB"
                :percent="item['项目回款'] / 5"
              />
            </view>
            <view class="five-count">{{ item['项目回款'] }}万元</view>
          </view>
        </view>
        <view
          v-else-if="state.projectType === '延期'"
          class="process-item-extension"
          v-for="(item, index) in state.extensionData"
        >
          <view class="delay-item-first">
            <scroll-view scroll-x="true" class="item-name">{{ item['项目名称'] }}</scroll-view>
            
            <view class="item-pl"><u-icon name="account"></u-icon>{{ item['项目经理'] }}</view>
          </view>
          <view class="milepost-name-extension" scroll-x="true">
            <scroll-view class="milepost-first" scroll-x="true">当前项目阶段：</scroll-view>
              <scroll-view class="milepost-second" scroll-x="true">{{ item['当前项目阶段'] }}</scroll-view>
            </view>
          <view class="delay-item-second">
            <view class="second-title">计划合同完成时间</view>
            <view class="second-time">{{ item['计划（合同完成时间）'] }}</view>
            <view class="delay-days">延期{{ item['延期天数'] }}天</view>
          </view>
          <view class="delay-item-four">
            <view class="four-title">项目支出</view>
            <view class="four-line">
              <u-line-progress
                inactive-color="#fff"
                :show-percent="false"
                style="height: 10px; border-radius: 10px"
                active-color="#FF9846"
                :percent="item['项目支出'] / 5"
              />
            </view>
            <view class="four-count">{{ item['项目支出'] }}万元</view>
          </view>
          <view class="delay-item-five">
            <view class="five-title">项目回款</view>
            <view class="five-line">
              <u-line-progress
                inactive-color="#fff"
                :show-percent="false"
                style="height: 10px; border-radius: 10px"
                active-color="#36CBCB"
                :percent="item['项目回款'] / 5"
              />
            </view>
            <view class="five-count">{{ item['项目回款'] }}万元</view>
          </view>
        </view>
        <view
          v-if="state.projectType === '待回款'"
          class="process-item"
          v-for="(item, index) in state.pendingPayment"
        >
          <view class="process-item-first">
            <scroll-view scroll-x="true" class="item-name-payment">{{ item['项目名'] }}</scroll-view>
            <!-- <view class="item-pl"><u-icon name="account"></u-icon>{{ item['项目经理'] }}</view> -->
          </view>
          <view class="process-item-second">
            <view class="payment-second-title">待回款里程碑</view>
            <scroll-view scroll-x="true" class="payment-second-content">{{
              item['当前回款里程碑']
            }}</scroll-view>
          </view>

          <view class="process-item-four">
            <view class="four-title">待回款金额</view>
            <view class="four-line">
              <u-line-progress
                inactive-color="#fff"
                :show-percent="false"
                style="height: 10px; border-radius: 10px"
                active-color="#FF9846"
                :percent="item['待回款金额'] / 5"
              />
            </view>
            <view class="four-count">{{ item['待回款金额'] }}万元</view>
          </view>
          <view class="process-item-five">
            <view class="five-title">已回款金额</view>
            <view class="five-line">
              <u-line-progress
                inactive-color="#fff"
                :show-percent="false"
                style="height: 10px; border-radius: 10px"
                active-color="#36CBCB"
                :percent="item['已回款金额'] / 5"
              />
            </view>
            <view class="five-count">{{ item['已回款金额'] }}万元</view>
          </view>
          <view class="process-item-three">
            <view class="three-title">合同总金额</view>
            <view class="three-line">
              <u-line-progress
                inactive-color="#fff"
                :show-percent="false"
                style="height: 10px; border-radius: 10px"
                active-color="#3875FF"
                :percent="item['合同金额'] / 5"
              />
            </view>
            <view class="three-count">{{ item['合同金额'] }}万元</view>
          </view>
        </view>
      </view>
    </view>
    <!-- end vid_t6yoxv8mae 自定义模板_zuijfj20tt -->
  </view>
</template>
  <script setup>
import {
  ref,
  reactive,
  toRaw,
  markRaw,
  watch,
  computed,
  onBeforeMount,
  onMounted,
  onBeforeUnmount,
  onUnmounted,
  onActivated,
  onDeactivated,
  getCurrentInstance,
} from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios';
import {
  isEqual,
  cloneDeep,
  isNullOrEmpty,
  isEmptyArr,
  isArray,
  isNullOrUnDef,
  localGet,
  traversalTreeStructure,
  set,
  checkCaseCondition,
  throttle,
  merge,
  switchCase,
  dateParse,
  debounce,
  isContained,
} from '@/utils/index';
import { CovertOptions, getChartsDataSourceConvert } from '@/utils/chart';
import {
  propertyFormatByNumber,
  propertyFormatByPercentage,
  propertyFormatByDate,
} from '@/utils/format';
import { FormFormat } from '@/utils/formFormat';
import { customAddWaterMarkFunc, generateWaterMarkText } from '@/utils/addWaterMark';
import dayjs from 'dayjs';
/*** UNI_APP_EXEGESIS ***
    import { handleRedirect, permission } from '@/utils/common'
    import { onPullDownRefresh, onLoad, onReady, onShow, onHide, onPageScroll } from '@dcloudio/uni-app'
    *** UNI_APP_EXEGESIS ***/

// ---------------------------- 属性定义 ----------------------------
const sourceId = 'page3000000063';

// 是否显示菜单按钮
const isMenuIconShow = false;
// NAVIGATION_MENU
const handleShowNavigation = () => {};

const setTimeOutList = [];

const vid_t6yoxv8mae_props = reactive({
  code: '',
});

// ============================ 属性定义 ============================

// ---------------------------- 元素数据引用 ----------------------------
// 组件 自定义模板_zuijfj20tt ref 的引用
const vid_t6yoxv8mae_ref = ref(null);
// 动态key的map
const fieldTypeMap = {};
// 动态key的map
const refMap = { vid_t6yoxv8mae_ref };

const showState = reactive({
  vid_t6yoxv8mae_visible: true,
});
// ============================ 元素数据引用 ============================

// ---------------------------- 数据 ----------------------------

// ============================ 数据 ============================

// ---------------------------- 方法 ----------------------------
// ---------------------------- 页面数据 ----------------------------

// ============================ 页面数据 ============================

// ---------------------------- 响应 ----------------------------

// ============================ 响应 ============================

// ---------------------------- 函数 ----------------------------

// 自定义函数 返回上一页
const customFunction_goBack_zlst1byi3q = (...params) => {
  uni.navigateBack();
};

const pageScrollTop = ref(0);

// *** PREVIEW_EXEGESIS ***

onUnmounted(() => {
  // 销毁定时器
  setTimeOutList.forEach(({ repeat, timer }) => {
    repeat ? clearInterval(timer) : clearTimeout(timer);
  });
});



// ============================ 生命周期 ============================

// ---------------------------- 数据关联处理 ----------------------------
// ---------------------------- 组件数据同步 ----------------------------

// ============================ 组件数据同步 ============================
//
// ============================ 数据关联处理 ============================

// ---------------------- 不同组件自定义的处理逻辑 ---------------------

// ====================== 不同组件自定义的处理逻辑 ======================
onMounted(() => {
  if (state.projectName === '傲林') {
    if (state.projectType === '进行中') {
      getProgressTableData();
    } else if (state.projectType === '已交付') {
      getDeliveredTableData();
    } else if (state.projectType === '延期') {
      getExtensionTableData();
    } else if (state.projectType === '待回款') {
      getPendingPayment();
    }
  } else if (state.projectName === '研究院') {
    if (state.projectType === '进行中') {
      getYjyProgressTableData();
    } else if (state.projectType === '已交付') {
      getYjjDeliveredTableData();
    } else if (state.projectType === '延期') {
      getYjjExtensionTableData();
    } else if (state.projectType === '待回款') {
      getYjjPendingPayment();
    }
  }
});

// ================================定制化逻辑========================================
const state = reactive({
  projectName: '',
  projectType: '',
  progressData: [],
  deliveredData: [],
  extensionData: [],
  pendingPayment: [],
});
// 提取url参数
function getParameterByName(name, url = window.location.href) {
  name = name.replace(/[\[\]]/g, '\\$&');
  var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
    results = regex.exec(url);
  if (!results) return null;
  if (!results[2]) return '';
  return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
let currentURL = window.location.href;
state.projectName = getParameterByName('name', currentURL);
state.projectType = getParameterByName('type', currentURL);
// 获取傲林进行中项目详情数据
function getProgressTableData() {
  const params = {
    valueFieldList: [
      {
        name: 'project_name',
        alias: '项目名称',
        datasetFieldName: 'project_name',
      },
      {
        name: 'milepost_name',
        alias: '当前项目阶段\t',
        datasetFieldName: 'milepost_name',
      },
      {
        name: 'contract_end_time',
        alias: '计划（合同完成时间）\t',
        datasetFieldName: 'contract_end_time',
        dateFormat: 'YYYY_MM_DD',
      },
      {
        name: 'total_money',
        alias: '合同总金额',
        datasetFieldName: 'total_money',
      },
      {
        name: 'hours_amount',
        alias: '项目支出',
        datasetFieldName: 'hours_amount',
      },
      {
        name: 'payment_money',
        alias: '项目回款',
        datasetFieldName: 'payment_money',
      },
      {
        name: 'pm_name',
        alias: '项目经理',
        datasetFieldName: 'pm_name',
      },
    ],
    rowFieldList: [],
    headFieldList: [],
    filterConditionTree: {
      operator: 'AND',
      children: [
        {
          expression: {
            filterType: 'CONDITION',
            filterCondition: {
              conditionType: 'BELONG',
              dateFormat: 'YYYY_MM_DD',
              datasetFieldName: 'project_source',
              nodeColumnName: 'project_source',
              nodeColumnType: 'TEXT',
              value: [state.projectName],
            },
          },
        },
      ],
    },
    pageSize: 1000,
    pageNo: 1,
    fullData: true,
    dataAccessType: 'APPLICATION_RESOURCES',
    catalogId: 'NATIVE_DATASET',
    tableId: '271ec12c-082f-4bb7-8728-6ca3319dd347',
    tableName: '进行中项目明细',
    componentId: 'vid_8t69m4c2di',
    businessCode: 'NATIVE_DATASET',
    originTableBizCode: '271ec12c-082f-4bb7-8728-6ca3319dd347',
    dashboardType: 'OTHER',
  };
  post('/visualization-data/api/v1/data-center/dashboard/data', params).then(
    ({ data: { dataList } }) => {
      state.progressData = dataList;
    },
  );
}
// 获取研究院进行中项目详情
function getYjyProgressTableData() {
  const params = {
    valueFieldList: [
      {
        name: 'project_name',
        alias: '项目名称',
        datasetFieldName: 'project_name',
      },
      {
        name: 'milepost_name',
        alias: '当前项目阶段\t',
        datasetFieldName: 'milepost_name',
      },
      {
        name: 'contract_end_time',
        alias: '计划（合同完成时间）\t',
        datasetFieldName: 'contract_end_time',
        dateFormat: 'YYYY_MM_DD',
      },
      {
        name: 'total_money',
        alias: '合同总金额',
        datasetFieldName: 'total_money',
      },
      {
        name: 'hours_amount',
        alias: '项目支出',
        datasetFieldName: 'hours_amount',
      },
      {
        name: 'payment_money',
        alias: '项目回款',
        datasetFieldName: 'payment_money',
      },
      {
        name: 'pm_name',
        alias: '项目经理',
        datasetFieldName: 'pm_name',
      },
    ],
    rowFieldList: [],
    headFieldList: [],
    filterConditionTree: {
      operator: 'AND',
      children: [
        {
          expression: {
            filterType: 'CONDITION',
            filterCondition: {
              conditionType: 'BELONG',
              dateFormat: 'YYYY_MM_DD',
              datasetFieldName: 'project_source',
              nodeColumnName: 'project_source',
              nodeColumnType: 'TEXT',
              value: [state.projectName],
            },
          },
        },
      ],
    },
    pageSize: 1000,
    pageNo: 1,
    fullData: true,
    dataAccessType: 'APPLICATION_RESOURCES',
    catalogId: 'NATIVE_DATASET',
    tableId: '271ec12c-082f-4bb7-8728-6ca3319dd347',
    tableName: '进行中项目明细',
    componentId: 'vid_8t69m4c2di',
    businessCode: 'NATIVE_DATASET',
    originTableBizCode: '271ec12c-082f-4bb7-8728-6ca3319dd347',
    dashboardType: 'OTHER',
  };
  post('/visualization-data/api/v1/data-center/dashboard/data', params).then(
    ({ data: { dataList } }) => {
      state.progressData = dataList;
    },
  );
}
//获取傲林已交付项目数据
function getDeliveredTableData() {
  const params = {
    valueFieldList: [
      {
        name: 'project_name',
        alias: '项目名称',
        datasetFieldName: 'project_name',
      },
      {
        name: 'contract_end_time',
        alias: '计划（合同完成时间）',
        datasetFieldName: 'contract_end_time',
        dateFormat: 'YYYY_MM_DD',
      },
      {
        name: 'end_time',
        alias: '实际完成时间',
        datasetFieldName: 'end_time',
        dateFormat: 'YYYY_MM_DD',
      },
      {
        name: 'total_money',
        alias: '合同总金额',
        datasetFieldName: 'total_money',
      },
      {
        name: 'hours_amount',
        alias: '项目支出',
        datasetFieldName: 'hours_amount',
      },
      {
        name: 'payment_money',
        alias: '项目回款',
        datasetFieldName: 'payment_money',
      },
      {
        name: 'pm_name',
        alias: '项目经理',
        datasetFieldName: 'pm_name',
      },
    ],
    rowFieldList: [],
    headFieldList: [],
    filterConditionTree: {
      operator: 'AND',
      children: [
        {
          expression: {
            filterType: 'CONDITION',
            filterCondition: {
              conditionType: 'BELONG',
              dateFormat: 'YYYY_MM_DD',
              datasetFieldName: 'project_source',
              nodeColumnName: 'project_source',
              nodeColumnType: 'TEXT',
              value: [state.projectName],
            },
          },
        },
      ],
    },
    pageSize: 1000,
    pageNo: 1,
    fullData: true,
    dataAccessType: 'APPLICATION_RESOURCES',
    catalogId: 'NATIVE_DATASET',
    tableId: '37a58587-ac18-4a43-bc3e-89c875af6bc8',
    tableName: '已交付',
    componentId: 'vid_x1jjbr9lzp',
    businessCode: 'NATIVE_DATASET',
    originTableBizCode: '37a58587-ac18-4a43-bc3e-89c875af6bc8',
    dashboardType: 'OTHER',
  };
  post('/visualization-data/api/v1/data-center/dashboard/data', params).then(
    ({ data: { dataList } }) => {
      state.deliveredData = dataList;
    },
  );
}
//获取研究院已交付项目数据
function getYjjDeliveredTableData() {
  const params = {
    valueFieldList: [
      {
        name: 'project_name',
        alias: '项目名称',
        datasetFieldName: 'project_name',
      },
      {
        name: 'contract_end_time',
        alias: '计划（合同完成时间）',
        datasetFieldName: 'contract_end_time',
        dateFormat: 'YYYY_MM_DD',
      },
      {
        name: 'end_time',
        alias: '实际完成时间',
        datasetFieldName: 'end_time',
        dateFormat: 'YYYY_MM_DD',
      },
      {
        name: 'total_money',
        alias: '合同总金额',
        datasetFieldName: 'total_money',
      },
      {
        name: 'hours_amount',
        alias: '项目支出',
        datasetFieldName: 'hours_amount',
      },
      {
        name: 'payment_money',
        alias: '项目回款',
        datasetFieldName: 'payment_money',
      },
      {
        name: 'pm_name',
        alias: '项目经理',
        datasetFieldName: 'pm_name',
      },
    ],
    rowFieldList: [],
    headFieldList: [],
    filterConditionTree: {
      operator: 'AND',
      children: [
        {
          expression: {
            filterType: 'CONDITION',
            filterCondition: {
              conditionType: 'BELONG',
              dateFormat: 'YYYY_MM_DD',
              datasetFieldName: 'project_source',
              nodeColumnName: 'project_source',
              nodeColumnType: 'TEXT',
              value: [state.projectName],
            },
          },
        },
      ],
    },
    pageSize: 1000,
    pageNo: 1,
    fullData: true,
    dataAccessType: 'APPLICATION_RESOURCES',
    catalogId: 'NATIVE_DATASET',
    tableId: '37a58587-ac18-4a43-bc3e-89c875af6bc8',
    tableName: '已交付',
    componentId: 'vid_x1jjbr9lzp',
    businessCode: 'NATIVE_DATASET',
    originTableBizCode: '37a58587-ac18-4a43-bc3e-89c875af6bc8',
    dashboardType: 'OTHER',
  };
  post('/visualization-data/api/v1/data-center/dashboard/data', params).then(
    ({ data: { dataList } }) => {
      state.deliveredData = dataList;
    },
  );
}
// 获取傲林延期项目数据
function getExtensionTableData() {
  const params = {
    valueFieldList: [
      {
        name: 'project_name',
        alias: '项目名称',
        datasetFieldName: 'project_name',
      },
      {
        name: 'milepost_name',
        alias: '当前项目阶段',
        datasetFieldName: 'milepost_name',
      },
      {
        name: 'contract_end_time',
        alias: '计划（合同完成时间）',
        datasetFieldName: 'contract_end_time',
        dateFormat: 'YYYY_MM_DD',
      },
      {
        name: 'delay_days',
        alias: '延期天数',
        datasetFieldName: 'delay_days',
      },
      {
        name: 'hours_amount',
        alias: '项目支出',
        datasetFieldName: 'hours_amount',
      },
      {
        name: 'payment_money',
        alias: '项目回款',
        datasetFieldName: 'payment_money',
      },
      {
        name: 'pm_name',
        alias: '项目经理',
        datasetFieldName: 'pm_name',
      },
    ],
    rowFieldList: [],
    headFieldList: [],
    filterConditionTree: {
      operator: 'AND',
      children: [
        {
          expression: {
            filterType: 'CONDITION',
            filterCondition: {
              conditionType: 'BELONG',
              dateFormat: 'YYYY_MM_DD',
              datasetFieldName: 'project_source',
              nodeColumnName: 'project_source',
              nodeColumnType: 'TEXT',
              value: [state.projectName],
            },
          },
        },
      ],
    },
    pageSize: 1000,
    pageNo: 1,
    fullData: true,
    dataAccessType: 'APPLICATION_RESOURCES',
    catalogId: 'NATIVE_DATASET',
    tableId: '78e967a3-9451-4337-b86f-e25d521f166f',
    tableName: '延期明细',
    componentId: 'vid_omp5sc5r1x',
    businessCode: 'NATIVE_DATASET',
    originTableBizCode: '78e967a3-9451-4337-b86f-e25d521f166f',
    dashboardType: 'OTHER',
  };
  post('/visualization-data/api/v1/data-center/dashboard/data', params).then(
    ({ data: { dataList } }) => {
      state.extensionData = dataList;
    },
  );
}
// 获取研究院延期项目数据
function getYjjExtensionTableData() {
  const params = {
    valueFieldList: [
      {
        name: 'project_name',
        alias: '项目名称',
        datasetFieldName: 'project_name',
      },
      {
        name: 'milepost_name',
        alias: '当前项目阶段',
        datasetFieldName: 'milepost_name',
      },
      {
        name: 'contract_end_time',
        alias: '计划（合同完成时间）',
        datasetFieldName: 'contract_end_time',
        dateFormat: 'YYYY_MM_DD',
      },
      {
        name: 'delay_days',
        alias: '延期天数',
        datasetFieldName: 'delay_days',
      },
      {
        name: 'hours_amount',
        alias: '项目支出',
        datasetFieldName: 'hours_amount',
      },
      {
        name: 'payment_money',
        alias: '项目回款',
        datasetFieldName: 'payment_money',
      },
      {
        name: 'pm_name',
        alias: '项目经理',
        datasetFieldName: 'pm_name',
      },
    ],
    rowFieldList: [],
    headFieldList: [],
    filterConditionTree: {
      operator: 'AND',
      children: [
        {
          expression: {
            filterType: 'CONDITION',
            filterCondition: {
              conditionType: 'BELONG',
              dateFormat: 'YYYY_MM_DD',
              datasetFieldName: 'project_source',
              nodeColumnName: 'project_source',
              nodeColumnType: 'TEXT',
              value: [state.projectName],
            },
          },
        },
      ],
    },
    pageSize: 1000,
    pageNo: 1,
    fullData: true,
    dataAccessType: 'APPLICATION_RESOURCES',
    catalogId: 'NATIVE_DATASET',
    tableId: '78e967a3-9451-4337-b86f-e25d521f166f',
    tableName: '延期明细',
    componentId: 'vid_omp5sc5r1x',
    businessCode: 'NATIVE_DATASET',
    originTableBizCode: '78e967a3-9451-4337-b86f-e25d521f166f',
    dashboardType: 'OTHER',
  };
  post('/visualization-data/api/v1/data-center/dashboard/data', params).then(
    ({ data: { dataList } }) => {
      state.extensionData = dataList;
    },
  );
}
// 获取傲林待回款项目数据
function getPendingPayment() {
  const params = {
    valueFieldList: [
      {
        name: 'project_name',
        alias: '项目名',
        datasetFieldName: 'project_name',
      },
      {
        name: 'payment_milepost_name',
        alias: '当前回款里程碑',
        datasetFieldName: 'payment_milepost_name',
      },
      {
        name: 'no_payment_money',
        alias: '待回款金额',
        datasetFieldName: 'no_payment_money',
      },
      {
        name: 'payment_money',
        alias: '已回款金额',
        datasetFieldName: 'payment_money',
      },
      {
        name: 'total_money',
        alias: '合同金额',
        datasetFieldName: 'total_money',
      },
    ],
    rowFieldList: [],
    headFieldList: [],
    filterConditionTree: {
      operator: 'AND',
      children: [
        {
          expression: {
            filterType: 'CONDITION',
            filterCondition: {
              conditionType: 'BELONG',
              dateFormat: 'YYYY_MM_DD',
              datasetFieldName: 'project_source',
              nodeColumnName: 'project_source',
              nodeColumnType: 'TEXT',
              value: [state.projectName],
            },
          },
        },
      ],
    },
    pageSize: 1000,
    pageNo: 1,
    fullData: true,
    dataAccessType: 'APPLICATION_RESOURCES',
    catalogId: 'NATIVE_DATASET',
    tableId: '2d58b271-e0c4-417d-ab8c-c1ef5f584c10',
    tableName: '待回款金额详情',
    componentId: 'vid_h9rd5fc8bu',
    businessCode: 'NATIVE_DATASET',
    originTableBizCode: '2d58b271-e0c4-417d-ab8c-c1ef5f584c10',
    dashboardType: 'OTHER',
  };
  post('/visualization-data/api/v1/data-center/dashboard/data', params).then(
    ({ data: { dataList } }) => {
      state.pendingPayment = dataList;
    },
  );
}
// 获取研究院待回款项目数据
function getYjjPendingPayment() {
  const params = {
    valueFieldList: [
      {
        name: 'project_name',
        alias: '项目名',
        datasetFieldName: 'project_name',
      },
      {
        name: 'payment_milepost_name',
        alias: '当前回款里程碑',
        datasetFieldName: 'payment_milepost_name',
      },
      {
        name: 'no_payment_money',
        alias: '待回款金额',
        datasetFieldName: 'no_payment_money',
      },
      {
        name: 'payment_money',
        alias: '已回款金额',
        datasetFieldName: 'payment_money',
      },
      {
        name: 'total_money',
        alias: '合同金额',
        datasetFieldName: 'total_money',
      },
    ],
    rowFieldList: [],
    headFieldList: [],
    filterConditionTree: {
      operator: 'AND',
      children: [
        {
          expression: {
            filterType: 'CONDITION',
            filterCondition: {
              conditionType: 'BELONG',
              dateFormat: 'YYYY_MM_DD',
              datasetFieldName: 'project_source',
              nodeColumnName: 'project_source',
              nodeColumnType: 'TEXT',
              value: [state.projectName],
            },
          },
        },
      ],
    },
    pageSize: 10,
    pageNo: 1,
    fullData: true,
    dataAccessType: 'APPLICATION_RESOURCES',
    catalogId: 'NATIVE_DATASET',
    tableId: '2d58b271-e0c4-417d-ab8c-c1ef5f584c10',
    tableName: '待回款金额详情',
    componentId: 'vid_h9rd5fc8bu',
    businessCode: 'NATIVE_DATASET',
    originTableBizCode: '2d58b271-e0c4-417d-ab8c-c1ef5f584c10',
    dashboardType: 'OTHER',
  };
  post('/visualization-data/api/v1/data-center/dashboard/data', params).then(
    ({ data: { dataList } }) => {
      state.pendingPayment = dataList;
    },
  );
}
</script>
  <style lang="less" scoped>
.page_root {
  min-height: 100%;
  box-sizing: border-box;
  background-color: #daf1ff;
}
.body {
  padding: 15px;
  height: 100%;
  position: relative;
}
.top-bac {
  height: 200px;
  background-image: linear-gradient(179deg, #3675ff 1%, rgba(56, 117, 255, 0) 100%);
  position: absolute; /* 让 .top-bac 成为绝对定位的元素 */
  width: 100%; /* 使 .top-bac 水平铺满父容器 */
  top: 0; /* 将 .top-bac 定位到父容器的顶部 */
  left: 0;
}

.process-item {
  padding: 15px;
  height: 175px;
  background: rgba(255, 255, 255, 0.8);
  border: 2px solid rgba(255, 255, 255, 1);
  border-radius: 8px;
  margin-bottom: 10px;
  position: relative; /* 将 position 设置为 relative 以允许 z-index 生效 */
}
.process-item-doing {
  padding: 15px;
  height: 200px;
  background: rgba(255, 255, 255, 0.8);
  border: 2px solid rgba(255, 255, 255, 1);
  border-radius: 8px;
  margin-bottom: 10px;
  position: relative; /* 将 position 设置为 relative 以允许 z-index 生效 */
}
.process-item-extension {
  padding: 15px;
  height: 150px;
  background: rgba(255, 255, 255, 0.8);
  border: 2px solid rgba(255, 255, 255, 1);
  border-radius: 8px;
  margin-bottom: 10px;
  position: relative; /* 将 position 设置为 relative 以允许 z-index 生效 */
}

.process-item:first-child {
  background: rgba(255, 255, 255, 0.7); /* 为第一个 .process-item 设置背景的透明度 */
  z-index: 1; /* 为第一个 .process-item 设置较高的 z-index 值 */
}
.item-name {
  padding: 0 5px 0 0;
  width: 75%;
  white-space: nowrap;
  font-size: 16px;
  color: #262626;
  letter-spacing: 0;
  font-weight: 600;
}
.item-name-payment{
  padding: 0 5px 0 0;
  width: 100%;
  white-space: nowrap;
  font-size: 16px;
  color: #262626;
  letter-spacing: 0;
  font-weight: 600;
}
.milepost-name {
  display: flex;
  padding: 0 5px 0 0;
  width: 50%;
  white-space: nowrap;
  font-size: 14px;
  color: #262626;
  letter-spacing: 0;
  width: 100%;
  margin-bottom: 10px;
}
.milepost-name-extension {
  display: flex;
  padding: 0 5px 0 0;
  width: 50%;
  white-space: nowrap;
  font-size: 14px;
  color: #262626;
  letter-spacing: 0;
  width: 100%;
}
.milepost-first{
  width: 40%;
}
.milepost-second{
  width: 60%;
}
.item-tag {
  height: 25px;
  line-height: 25px;
  width: 25%;
  text-align: center;
  font-size: 12px;
  color: #ff9846;
  letter-spacing: 0;
  font-weight: 400;
  background: rgba(255, 152, 70, 0.1);
  border: 1px solid rgba(255, 152, 70, 1);
  border-radius: 20px;
  white-space: nowrap;
}
.item-pl {
  text-align: right;
  width: 25%;
  font-size: 14px;
  color: #262626;
  letter-spacing: 0;
}
.second-title {
  width: 40%;
  font-size: 14px;
  color: #8c8c8c;
  letter-spacing: 0;
  font-weight: 400;
}
.second-time {
  font-size: 14px;
  color: #262626;
  letter-spacing: 0;
  font-weight: 400;
  width: 40%;
}
.process-item-three,
.process-item-four,
.delay-item-four,
.delay-item-five,
.delay-item-second,
.process-item-five {
  display: flex;
}
.process-item-first {
  display: flex;
  justify-content: space-between;
}
.delay-item-five {
  margin-bottom: 15px;
}
.process-item-second,
.delayed-item-second,
.delayed-item-time,
.delay-item-first {
  display: flex;
  justify-content: flex-start;
}
.process-item-first {
  margin-bottom: 5px;
  height: 25px;
}
.process-item-second {
  margin-bottom: 17px;
}
.three-title,
.four-title,
.five-title {
  width: 23%;
}
.three-line,
.four-line,
.five-line {
  width: 50%;
  padding: 0 5px;
}
.three-count {
  font-size: 14px;
  color: #3875ff;
  font-weight: 600;
}
.four-count {
  font-size: 14px;
  color: #ff9846;
  font-weight: 600;
}
.five-count {
  font-size: 14px;
  color: #36cbcb;
  font-weight: 600;
}
.delay-days {
  background: #fa6400;
  border-radius: 8px 9px 9px 0px;
  color: #fff;
  flex: 1;
  text-align: center;
  height: 20px;
  font-size: 12px;
}
.delay-item-first {
  margin-bottom: 8px;
}
.payment-second-title {
  width: 40%;
}
.payment-second-content {
  width: 60%;
  white-space: nowrap;
}
</style>
  